<template>
  <div class="DocStatusBar">
    🎉 {{ require('../package.json').version }} 版本 🎉
    <div>
      <span class="emoji emoji26a1"></span>
      组件预览区背景：<input type="color" @input="$emit('styleChange', style)" v-model="style.docListbackgroundColor" />
      缩放比例: <input class="docInput" @input="$emit('styleChange', style)" type="number" :step="0.1" :min="0" v-model="style.docListScaling"/>
      <button @click="save">保存</button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    _style: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data: () => ({
    style: {}
  }),
  created(){
    this.style = this.deepClone(this._style)
  },
  methods: {
    save(){
      localStorage.setItem('docListbackgroundColor', this.style.docListbackgroundColor);
      localStorage.setItem('docListScaling', this.style.docListScaling);
      alert("成功！")
    },
    deepClone(source) {
      if (!source && typeof source !== 'object') {
      throw new Error('error arguments', 'deepClone')
      }
      const targetObj = source.constructor === Array ? [] : {}
      Object.keys(source).forEach(keys => {
      if (source[keys] && typeof source[keys] === 'object') {
        targetObj[keys] = this.deepClone(source[keys])
      } else {
        targetObj[keys] = source[keys]
      }
      })
      return targetObj
    }
  }
};
</script>
<style scoped>
@import '../public/css/common.css';
.DocStatusBar{
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: space-between; */
  font-size: 12px;
  height: 28px;
  width: 100%;
  color: #1d2935;
}
</style>